<template>
	<view>
		<ClosePopup title="新增区间" height="70vh" ref="addRangePopupRef">
			<view class="close-popup-content">
				<view class="flex-ac  form-item">
					<view class="left-label">门店</view>
					<view @click="selectStore" class="value">{{ model.store?.storeName ?? '请选择门店' }}</view>
				</view>
				<view class="flex-ac  form-item">
					<view class="left-label">名称</view>
					<up-input placeholder="请输入名称" v-model="model.name" border="none" color="#999" type="number"></up-input>
				</view>
				<view class="flex-ac  form-item">
					<view class="left-label">日期</view>
					<view @click="selectDate" class="value">
						{{ model.endDate ? `${model.startDate} 至 ${model.endDate}` : '请选择日期' }}</view>
				</view>

				<view class="flex-ac mt20">
					<view class="left-label">周中</view>
				</view>
				<view class="week-box flex mt20">
					<view v-for="(item, index) in week" :class="{ 'item': true, 'active': weekSelect[index] }"
						@click="weekSelect[index] = !weekSelect[index]">{{ item }}
					</view>
				</view>
				<view class="flex-ac mt20">
					<view class="left-label">周末</view>
				</view>
				<view class="week-box flex mt20">
					<view v-for="(item, index) in week" :class="{ 'item': true, 'active': !weekSelect[index] }"
						@click="weekSelect[index] = !weekSelect[index]">{{ item }}
					</view>
				</view>
				<view class="flex-jc close-popup-btn-group">
					<up-button type="primary" color="#B98A73" plain shape="circle" text="取消"
						@click="cancel"></up-button>
					<up-button type="primary" color="#B98A73" shape="circle" text="提交"
						@click="addRangeSubmit"></up-button>
				</view>
			</view>
		</ClosePopup>
		<CustomPopup :list="model.storeList" :pro="{ key: 'storeName', value: 'uuid' }" title="门店" ref="storePopupRef"
			@select="handleSelectStore"></CustomPopup>
		<up-calendar title="选择日期区间" color="#B98A73" @close="model.showCalendar = false" :show="model.showCalendar"
			mode="range" @confirm="confirm"></up-calendar>

	</view>
</template>
<script setup>
import { ref, reactive } from "vue"
import { postRequest } from "@/reuqest/request.js";
import ClosePopup from "@/components/close-popup/index.vue";
import CustomPopup from "@/components/custom-popup/index.vue";

const week = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周天"])
const weekSelect = ref([1, 1, 1, 1, 1, 0, 0])
const storePopupRef = ref(null)
const addRangePopupRef = ref(null)

const model = reactive({
	showCalendar: false,
	store: {},
	storeList: [],
	name:"",
	startDate: "",
	endDate: "",
})

const selectStore = () => {
	storePopupRef.value.open()
}

const open = () => {
	addRangePopupRef.value.open()
}

const cancel = () => {
	addRangePopupRef.value.close()
}

const selectDate = () => {
	model.showCalendar = true
}

const handleSelectStore = (item) => {
	model.store = item
}

const confirm = (e) => {
	console.log(e);
	model.startDate = e[0]
	model.endDate = e.at(-1)
	model.showCalendar = false;
};

const addRangeSubmit = () => { 

}

const getStore = (storeUuid) => {
	postRequest("/wx-operation/api/v1/bm/store/page", {
		pageNum: 1,
		pageSize: 2000,
	}).then(res => {
		if (res.bizCode === "00000") {
			model.storeList = res.data?.list || [];
			if (storeUuid) {
				model.store = model.storeList.find(item => item.uuid === storeUuid) || {};
			}
		}
	})
}

getStore()

defineExpose({ open })
</script>
<style lang="scss" scoped>
.close-popup-content {

	.form-item {
		border-bottom: 1px solid #EBEBEB;
		padding: 20rpx 0;

		& .value {
			flex: 1;
			color: #c0c4cc;
			font-size: 30rpx;
		}

		& .left-label {
			margin-right: 30rpx;
			font-size: 30rpx;
			width: 80rpx;
		}
	}


	.week-box {
		padding: 20rpx;
		gap: 30rpx;
		flex-wrap: wrap;

		.item {
			width: 140rpx;
			text-align: center;
			line-height: 60rpx;
			background: #f6f8fb;
			border-radius: 10rpx;

			&.active {
				color: #fff;
				background: #B98A73;
			}
		}
	}
}
</style>
